<template>
    <el-drawer
      v-model="modelDrawer"
      :title="navData?navData.module_name:''"
    >
      <el-button type="primary" size="default" @click="saveSubNav">
        转存商品列表分类数据
      </el-button>
      
      <el-tabs v-if="navData" @tab-click="handleProduct">
        <el-tab-pane v-for="item in navData.sub_navigation_list" :label="item.name">
          <el-button type="primary" size="default" @click="savePro">
            转存商品数据
          </el-button>
          <el-row :gutter="20">
            <el-col v-for="pro in proList" :span="12" :offset="0">
              <img :src="pro.icon+'?x-oss-process=style/w100-webp'" alt="">
              <h4>{{ pro.name }}</h4>
            </el-col>
          </el-row>
          
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </template>
  
  <script lang="ts" setup>
  // script内部的逻辑代码，只有在my-drawer组件第一次被调用的时候会执行

  import { ref, watch } from 'vue';
  import { proSaveBatch, productGet, subNavGet, subNavSave } from '../../../api/category';
  import { ElMessage } from 'element-plus';
  import 'element-plus/dist/index.css'

  // 接收父组件传进来的v-model数据 （双向）
  const modelDrawer = defineModel()

  // 接收父组件传进来的Props数据  （单项）
  const props = defineProps(['module_id','test'])
  
  
  // 以最新的module_id为条件，请求https://m.wzj.com/proxy/classification/navigation?module_id=1445
  // watch监听，当props发生改变时，执行回调函数
  const navData = ref()  //存放细分类数据包
  watch(props,async ()=>{
    console.log('抽屉组件得到的id',props.module_id);
    let data = await subNavGet(props.module_id)
    navData.value = data
  })

  // 通过分类菜单加载不同商品数据
  const proList = ref() // 定义存储商品数据的响应式数据包
  let sub_nav_id = ''  //临时记录被选中的细分类id
  const handleProduct = async (pane,ev)=>{ //pane、ev是tabs组件的事件自动提供的参数
    // console.log(pane.index,ev);
    console.log('被点击选中的细分类id',navData.value.sub_navigation_list[pane.index].id);
    let {id} = navData.value.sub_navigation_list[pane.index] //细分类id，sub_navigation_id
    let data = await productGet(id) //获取商品列表数据
    proList.value = data
    sub_nav_id = id   //点击细分类菜单时，记录它的sub_navigation_id
  }
  
  
  // 转存商品列表分类数据
  const saveSubNav = async ()=>{
    let msg = await subNavSave(navData.value)
    // console.log(msg);
    ElMessage(msg)  //明确提示用户操作结果
  }

  // 批量转存商品数据
  const savePro = async ()=>{
    let msg = await proSaveBatch(proList.value,sub_nav_id) //参数：商品数组、当前商品归属的细分类id
    ElMessage(msg)
  }
  </script>
  